Responsive layout settings
Description
This is where you will find the settings that allow you to define rules that change the layout of the UX component based on the type of device on which the component is running, its orientation and window size (in the case of a desktop browser). Clicking on the Responsive layout settings property will open the following Genie.
And here is an example of what can be done with with Responsive Layouts. The images below are the same list control viewed in two different layouts, one for when the phone is held vertically and the other for when it is held horizontally.
The Responsive Layout Genie has three parts or 'steps'. Step 1 is to define different rules, Step 2 is to define different actions, and Step 3 is to define different properties for those actions. The Guide below describes how you can create a simple responsive layout.
Prelude: Make a List Control with Multiple Layouts.
It is necessary to have some multiple layouts defined for a control before being able to implement a responsive layout.
Open the UX Builder. On the UX Controls page in the 'Data Controls' menu, click on the [List] option in order to add a list control to the component.
Check the 'Mobile' Checkbox in the UX controls toolbar.
Highlight the List Control. In the List Properties section of the control Properties list, click on the 'List properties' property in order to open the List Builder
Open the Data Source pane of the List Builder. Set the Data Source Type to 'Static'.
Click the
button next to the Static data property.
In the Static Choices dialog click the 'Sample data' button, lower left.
Select the 'Name and addresses (big data set)' option in the Sample Data dialog. Click OK and OK again to return to the List Builder.
Open the List Properties pane. Scroll down the list properties to the Multiple Layouts section. Check the 'Has multiple layouts' checkbox. The Multiple Layouts pane will appear.
Open the Multiple Layouts pane and highlight the Default layout.
Click the
button next to the Layout name property. Change the 'Default' layout name to
'Horizontal'.
Check the Default layout checkbox.
Click the Add button. Create a new layout. Give the new layout the name 'Vertical' and choose the 'Column' type from the drop down. Click OK.
Open the List Layout pane. Choose the 'Horizontal (Columns)' layout option from the dropdown at the bottom of the pane.
Use the blue > arrow to move all of the Static Choices fields from the 'Available Fields' list to the 'Columns in List'.
In Layout dropdown select the 'Vertical (Columns)' option.
Use the blue > arrow to move the ContactName field and the Country field from the Available Fields list to the Columns in List section. Click OK to close the List Builder.
On the UX Controls page highlight the list control and open the Panels menu.
Click on the [Panel Card] option and in the Insert Panel dialog click the 'Insert Around' option.
The completed control.
Step 1: Create a Rule
Rules are javascript expressions that evaluate to either true or false. These expressions can reference system fields, for example screen.width or screen.height.
Open the UX Properties page.
In the Responsive Layout Settings click the
button next to the
Responsive layout settings property to open the Responsive Layout Genie.
Click the Add Rule button on the Responsive Layout Genie.
Give the new rule a name in the 'Rule name' textbox. The name can be arbitrary but it should somewhat describe what the purpose of the rule is. This example uses the name 'landscape_rule'
Click on the Insert field button in the lower left of the Edit Rule dialog.
A list of all the system fields that you can reference will appear. Click on the 'screen.orientation' option to insert it into the Expression box.
Type == or click the 'Insert 'equals' operator button
'==' in Javascript tests whether the two sides of an expression are truthy. The word truthy is used because of Javascript's flexible definition regarding the values associated with different types of data. For example, when compared using a '==' operator the character '1' and the numeric value 1 will return true; '1' == 1. To test for strict equivalence Javascript uses the '===' operator.Type 'landscape' at the end of the expression and click OK.
Click the Add button again to add a second rule.
Name the rule 'portrait_rule' and give it the following expression, click OK:
screen.orientation == 'portrait'
The finished rules:
Step 2: Add and Action
Click the 'Add Action' in the lower left corner of the Responsive Layout Genie.
Select the 'Select active layout in a List control' option. Click OK
In the 'Select List' dialog click on the list control that was defined earlier, in this case 'list1'
The new action should appear in your 'Actions' list.
Step 3: Define an Action Property
Highlight the 'landscape_rule' Rule and the Action you just defined.
In the Select Layout Settings section, click the
button next to List Layout Name.
Select the Horizontal layout you defined.
Now highlight the 'portrait_rule' Rule and the 'Select active layout in a List control (list1)' action.
Return to the Select Layout Settings section and click the
button next to List Layout Name.
Select the Vertical layout. Click OK.
Close the Responsive Layout Genie and run the component in either Live Preview or Working Preview. Here is the vertical layout with the two fields that were defined.
Alter the orientation of the device by selecting a different orientation in the dropdown. You should see the layout change. Here the horizontal layout is displayed with the many fields tightly grouped.
In order to better see the fields it is possible to go back to the list builder and adjust the horizontal layout's width and/or the number of fields it displays. In the example below the 'horizontal' layout has had some fields cut in the list builder's List Layout pane. The Width property in the List Properties section of the UX controls page has also been increased to 4.5.